<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
    <title>Title</title>
<!--  <link rel="stylesheet" href="layui/css/layui.css"  media="all">-->
<!--  <script src="layui/layui.js"></script>-->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!--  layui-->


  <link  href="layui/css/layui.css"  rel="stylesheet">
  <script src="layui/layui.js"></script>

</head>
<body>


<div class="card-body" >
  <table class="table table-hover table-bordered">
    <thead>
    <tr>

      <th>ID</th>
      <th>姓名</th>
      <th>用户名</th>
      <th>邮箱</th>

    </tr>


    </thead>
    <tbody id="tbody">
        <div class="segment" id="cha"  align="center" th:each="user : ${pageInfo.getRecords()}">
          <tr id="biaoge">
            <td th:text="${user.id}"></td>
          <td th:text="${user.name}"></td>
            <td th:text="${user.account}"></td>
            <td th:text="${user.email}"></td>
          </tr>


        </div>
        <div id="charu" class="segment">

        </div>
    </tbody>
    <input id="wenben" placeholder="请输入姓名进行查询"  type="text"/><input onclick="chaxun()"  class="button info"  type="button" value="查询"/>
  </table>
<!--  <div data-am-widget="gotop" class="am-gotop am-gotop-default" >-->
<!--    <a href="#top" title="回到顶部">-->
<!--      <span class="am-gotop-title">回到顶部</span>-->
<!--      <i class="am-gotop-icon am-icon-chevron-up"></i>-->
<!--    </a>-->
<!--  </div>-->

  <hr/>
  <div class="am-form-group am-form-file">
    <i class="am-icon-cloud-upload"></i> 选择要上传的文件
    <input type="file" multiple>
  </div>
<script>
  $(function (){


  });

  function chaxun(){

      var name=$("#wenben").val();
      if(name==null || name.length==0){
        alert("查询内容不能为空");

      }else{
  $("#tbody").html("");
    $.ajax({
      "url": '/fenye/selectname/',
      "type": "post",
      "data":{"name":name},
      "dataType": "json",
      "success": function (a) {
        var html=null;
        for(var i = 0 ; i < a.length ; i++){
          // alert(a[i].id)
          html += " <tr ><td>"+a[i].id+"</td>  <td >"+a[i].name+"</td>   <td >"+a[i].account+"</td>        <td >"+a[i].email+"</td>   </tr>";



          // $('#charu').append(html);
        }
        $('#tbody').append(html);


      },
      error: function () {
        alert("加载失败");
        // window.location.href = "./index.html";
      }
    });
      }
  }
</script>

  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" >Previous</a></li>
    <li class="page-item"><a class="page-link" th:href="@{/fenye/manageMember/(pageNum=${pageInfo.getCurrent()-1})}">上一页</a></li>
    <li class="page-item"><a  class="page-link" th:href="@{/fenye/manageMember/(pageNum=${1})}" data-toggle="tooltip" title="首页">1</a></li>
    <li class="page-item"><a class="page-link" th:href="@{/fenye/manageMember/(pageNum=${2})}">2</a></li>
    <li class="page-item"><a class="page-link" th:href="@{/fenye/manageMember/(pageNum=${3})}">3</a></li>
    <li class="page-item"><a class="page-link" th:href="@{/fenye/manageMember/(pageNum=${pageInfo.current+1})}">下一页</a></li>
    <li class="page-item"><a class="page-link"  th:href="@{/fenye/manageMember/(pageNum=${pageInfo.pages})}">尾页</a></li>
  </ul>

  </br>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>显示完整功能</legend>
  </fieldset>

</div>
<script>
  layui.use(['laypage', 'layer'], function(){
    var laypage = layui.laypage
            ,layer = layui.layer;

    //总页数低于页码总数
    laypage.render({
      elem: 'demo0'
      ,count: 50 //数据总数
    });

    //总页数大于页码总数
    laypage.render({
      elem: 'demo1'
      ,count: 70 //数据总数
      ,jump: function(obj){
        console.log(obj)
      }
    });





    //开启HASH
    laypage.render({
      elem: 'demo5'
      ,count: 500
      ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
      ,hash: 'fenye' //自定义hash值
    });



    //完整功能
    laypage.render({
      elem: 'demo7'
      ,count: 100
      ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
      ,jump: function(obj){
        console.log(obj)
      }
    });



    //调用分页
    laypage.render({
      elem: 'demo20'
      ,count: data.length
      ,jump: function(obj){
        //模拟渲染
        document.getElementById('biuuu_city_list').innerHTML = function(){
          var arr = []
                  ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
          layui.each(thisData, function(index, item){
            arr.push('<li>'+ item +'</li>');
          });
          return arr.join('');
        }();
      }
    });

  });
</script>
<!--<a  th:href="@{/fenye/manageMember/(pageNum=${1})}">-->
<!--  <span aria-hidden="true">首页</span>-->
<!--</a>-->
<!--<a  th:href="@{/fenye/manageMember/(pageNum=${pageInfo.getCurrent()-1})}">-->
<!--  <span aria-hidden="true">上一页</span>-->
<!--</a>-->

<!--<a  th:href="@{/fenye/manageMember/(pageNum=${pageInfo.current+1})}">-->
<!--  <span aria-hidden="true">下一页</span>-->
<!--</a>-->

<!--<li>-->
<!--  <a th:href="'/fenye/manageMember?pageNum='+${pageInfo.pages}">尾页</a>-->
<!--</li>-->

<!--<p th:text="${pageInfo.getPages}">共有页</p>-->
<!--<p th:text="${pageInfo.current}">当前</p>-->
<!--<p th:text="${pageInfo.total}">记录条数</p>-->
<!--<div class="layui-carousel" id="test10">-->
<!--  <div carousel-item="">-->
<!--    <div>图片1</div>-->
<!--    <div>图片2</div>-->
<!--    <div>图片3</div>-->
<!--    <div>图片4</div>-->
<!--    <div>图片5</div>-->
<!--  </div>-->
<!--</div>-->
<!--<script>-->
<!--  layui.use(['carousel', 'form'], function(){-->
<!--    var carousel = layui.carousel-->
<!--            ,form = layui.form;-->

<!--    //常规轮播-->
<!--    carousel.render({-->
<!--      elem: '#test1'-->
<!--      ,arrow: 'always'-->
<!--    });-->

<!--    //改变下时间间隔、动画类型、高度-->
<!--    carousel.render({-->
<!--      elem: '#test2'-->
<!--      ,interval: 1800-->
<!--      ,anim: 'fade'-->
<!--      ,height: '120px'-->
<!--    });-->

<!--    //设定各种参数-->
<!--    var ins3 = carousel.render({-->
<!--      elem: '#test3'-->
<!--    });-->
<!--    //图片轮播-->
<!--    carousel.render({-->
<!--      elem: '#test10'-->
<!--      ,width: '778px'-->
<!--      ,height: '440px'-->
<!--      ,interval: 5000-->
<!--    });-->

<!--    //事件-->
<!--    carousel.on('change(test4)', function(res){-->
<!--      console.log(res)-->
<!--    });-->

<!--    var $ = layui.$, active = {-->
<!--      set: function(othis){-->
<!--        var THIS = 'layui-bg-normal'-->
<!--                ,key = othis.data('key')-->
<!--                ,options = {};-->

<!--        othis.css('background-color', '#5FB878').siblings().removeAttr('style');-->
<!--        options[key] = othis.data('value');-->
<!--        ins3.reload(options);-->
<!--      }-->
<!--    };-->

<!--    //监听开关-->
<!--    form.on('switch(autoplay)', function(){-->
<!--      ins3.reload({-->
<!--        autoplay: this.checked-->
<!--      });-->
<!--    });-->

<!--    $('.demoSet').on('keyup', function(){-->
<!--      var value = this.value-->
<!--              ,options = {};-->
<!--      if(!/^\d+$/.test(value)) return;-->

<!--      options[this.name] = value;-->
<!--      ins3.reload(options);-->
<!--    });-->

<!--    //其它示例-->
<!--    $('.demoTest .layui-btn').on('click', function(){-->
<!--      var othis = $(this), type = othis.data('type');-->
<!--      active[type] ? active[type].call(this, othis) : '';-->
<!--    });-->
<!--  });-->
<!--</script>-->
</body>
</html>